<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome - Minimal Theme</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
    />
    <script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video"></script>
    <script type="module" src="../../../dist/index.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/minimal/+esm"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        padding-bottom: 3rem;
      }

      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-theme-minimal {
        display: block;         /* expands the container if preload=none */
        max-width: 720px;       /* allows the container to shrink if small */
        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
      }

      label {
        display: block;
      }

      .auto-grid {
        --auto-grid-min-size: 20rem;
        display: grid;
        grid-template-columns: repeat(
          auto-fill,
          minmax(var(--auto-grid-min-size), 1fr)
        );
        grid-gap: 1rem;
      }
    </style>
  </head>
  <body>
    <!-- The main tag is used to exclude other body content in https://www.media-chrome.org/docs/en/examples -->
    <main>
      <h1>Media Chrome - Minimal Theme</h1>

      <media-theme-minimal>
        <video
          slot="media"
          src="https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/high.mp4"
          poster="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/thumbnail.jpg?time=56"
          crossorigin="anonymous"
          playsinline
        >
          <track
            label="thumbnails"
            default
            kind="metadata"
            src="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/storyboard.vtt"
          />
          <track
            label="English"
            kind="captions"
            srclang="en"
            src="../vtt/en-cc.vtt"
          />
        </video>
      </media-theme-minimal>
    </main>

    <br><br>

    <media-theme-minimal>
      <mux-video
        playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
        metadata-video-title="Big Buck Bunny"
        stream-type="live"
        slot="media"
      ></mux-video>
    </media-theme-minimal>
  </body>
</html>
